import React, {Component, Fragment} from 'react';
import {Link, Route} from "react-router-dom";
import Detail from "./Detail";

class Message extends Component {
  state = {
    messageArr: [
      {id: '01', title: 'message1'},
      {id: '02', title: 'message2'},
      {id: '03', title: 'message3'}
    ]
  }

  replaceShow = (id, title) => {
    return () => {
      this.props.history.replace('/home/message/detail', {id, title})
    }
  }

  pushShow = (id, title) => {
    return () => {
      this.props.history.push('/home/message/detail', {id, title})
    }
  }

  render() {
    const {messageArr} = this.state
    return (
      <Fragment>
        <ul>
          {
            messageArr.map(item => {
              return (
                <li key={item.id}>
                  {/*向路由传参params*/}
                  {/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>*/}

                  {/*传参search*/}
                  {/*<Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}

                  {/*传参state*/}
                  <Link to={{
                    pathname: '/home/message/detail',
                    state: {id: item.id, title: item.title}
                  }} replace>{item.title}</Link>
                  {/* replace模式，只替换historyStack栈顶记录，不会push(默认是push) */}
                  <button onClick={this.pushShow(item.id, item.title)}>Push</button>
                  <button onClick={this.replaceShow(item.id, item.title)}>Replace</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*接收参数param要声明*/}
        {/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}

        {/*传参search, 不需要声明，但是要去组件里面用querystring手动处理search*/}
        {/*传参state, 不需要声明接收*/}
        <Route path="/home/message/detail/" component={Detail}/>
      </Fragment>
    );
  }
}

export default Message;
